<template>
  <div class="card">
    <div class="card-icon" :class="color?color:'card-icon-blue'">
      <i :class="'iconfont '+icon"></i>
    </div>
    <div class="card-right-btn">
      <!-- 这是右上角的小按钮位置 -->
      <slot name="card-right-btn"></slot>
    </div>
    <h4 class="card-title">{{title}}</h4>
    <div class="card-body" :style="'max-height:'+maxHeight+'; min-height:'+(minHeight?minHeight:'210px')">
      <!-- 这是拥有命名的slot的默认内容 -->
      <slot name="card-content"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props:["title","color","icon","maxHeight","minHeight"],
  data () {
    return {
      name: 'CardBox',
      dataList: []
    };
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.card {
  position: relative;
  background: #fff;
  border-radius: 5px;
  padding: 0.9375rem 20px;
  padding-top: 45px;
  margin-top: 15px;
  margin-bottom:10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .card-icon {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -15px;
    left: 15px;
    background: linear-gradient(60deg,#66bb6a,#43a047);
    border-radius: 5px;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(76,175,80,.4);
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      color: #fff;
      font-size: 21px;
    }
  }
  //card-icon-color
  .card-icon-blue{
    background:linear-gradient(60deg,#26c6da,#00acc1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
      0 7px 10px -5px rgba(0, 188, 212, 0.4);
  }
  .card-icon-yellow{
    background:linear-gradient(60deg, rgb(255, 167, 38), rgb(251, 140, 0));
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(255,152,0,.4);
  }
  .card-icon-red{
    background:linear-gradient(60deg, rgb(239, 83, 80), rgb(229, 57, 53));
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(244,67,54,.4);
  }
  .card-icon-green{
    background:linear-gradient(60deg,#66bb6a,#43a047);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(76,175,80,.4);
  }
  .card-right-btn{
    color: #999;
    position: absolute;
    top: 8px;
    right: 15px;
    cursor:pointer;
  }
  .card-title{
    position: absolute;
    top: 15px;
    left: 75px;
    font-size: 14px;
  }
  .card-body{
    overflow-x: hidden;
    overflow-y: auto;
  }
}
// .card-body::before {
//   content: "\260E";
//   display: block;
//   width: 63px;
//   height: 63px;
//   position: absolute;
//   top: -30px;
//   left: 15px;
//   background: #00acc1;
// }
</style>
